<!-- TMPL_VAR NAME=doctype_head -->

  <title>Top News - <!-- TMPL_VAR NAME=company_name --></title>

<link rel='stylesheet' type='text/css' charset='utf-8' href="<!-- TMPL_VAR NAME=site_base_url -->stylesheets/mobile.css" media='all' />

<!-- TMPL_VAR NAME=internal_style -->

</head>
<body><!-- Page xhtml based on mobiforge templates. see http://mobiforge.com/starting/story/site-templates for orginals -->
<div id='body'>
    <div class="header">
      <img alt="<!-- TMPL_VAR NAME=company_name -->" src="<!-- TMPL_VAR NAME=site_base_url -->images/logo176.gif" width="112" height="50" title="<!-- TMPL_VAR NAME=company_alt -->" /><br />
      <a href="<!-- TMPL_VAR NAME=cgi_url -->&amp;page=home">Home</a> | <a href="<!-- TMPL_VAR NAME=cgi_url -->&amp;page=news">News</a> | Article
    </div>
    <!-- TMPL_VAR NAME=insert_ad_here -->
    <div id='status'><span class='alert'><!-- TMPL_VAR NAME=user_status --></span></div>
    <div class="top-news">
      <h2>Top News Item</h2>
      <img src="<!-- TMPL_VAR NAME=site_base_url -->images/image1-176.jpg" width="176" height="154" alt="Image for Story 1" />
      <p>
        The top news item is presented with a headline, abstract and image. On
        devices supporting it, the image will be floated left and the text will
        flow around it. The abstract ends up with a link to the full article.
      </p>
      <p>
        This is the full article and so will contain several paragraphs of text.
        If the story gets too long, the reader will need to scroll through a 
        significant amount of text to get to the navigation links to escape the
        story if their handset doesn't have a "back" key. 
      </p>
      <p>
        To avoid this, you can split the story up into several pages and link
        them with previous/next links. The disadvantage with this is that the
        high network latency of mobile networks will result in a poorer user
        experience for the user who wants to read the whole story.
      </p>
      <p>
        So, as with all design, this is a tradeoff.
      </p>
    </div>

<div class="footer">
    <a href="<!-- TMPL_VAR NAME=cgi_url -->&amp;page=home">Home</a> | <a href="<!-- TMPL_VAR NAME=cgi_url -->&amp;page=news">News</a> | Article<br />
    © <!-- TMPL_VAR NAME=company_name --> All rights reserved.<br />
    <span class='powered_by'>Powered by <a href="http://opensitemobile.com">MobileSiteOS</a>™</span>
</div>

</div>
</body>
</html>